<template>
  <div id="map-box"></div>
</template>

<script>
import mapboxgl from 'mapbox-gl' // 引入map-box
import geojson from '@/assets/js/zm_geojson.js'
const loadId = 'map-box' // 唯一的id
export default {
  data() {
    return {
      map: null
    }
  },
  mounted() {
    this.mapBox()
  },
  methods: {
    onMapClick(map) { // 点击地图图标事件（打印map看不到features属性） map.features 
      console.log(map.features[0]);
      // const projection=map.features[0].properties
      // data.features.forEach(item=>{
      //   item.properties.selected=0
      //   if (projection.event_subtype_code===item.properties.event_subtype_code) {
      //     item.properties.selected=1
      //   }
      // })
      // this.map&&this.map.getSource(loadId).setData(data) // 重新放回addSource里面
    },
    mapBox() {
      // map-box秘钥token
      mapboxgl.accessToken = 'pk.eyJ1Ijoiemhhb3h1eHUiLCJhIjoiY2w3azVnbGx3MGdlaTNxb2JhdTR4NHpwZiJ9.yM69RYEDfy5o5u0b9Lb_nw';
      const map = new mapboxgl.Map({
        container: loadId, // ID
        style: {
          version: 8,
          sprite: "mapbox://sprites/mapbox/streets-v8",
          fog: {   // 外围光线
            "range": [1.8, 8],
            "color": "#00ffff",
            "horizon-blend": 0.5,
            "high-color": "blue",
            "space-color": "#000000",
            "star-intensity": 0.15
          },
          sources: {
            'gd-satellite': {
              type: 'raster',
              tiles: [
                // 'http://61.241.133.190:18090/iserver/services/map-ugcv5-YaoHaiLD/wmts-china/YaoHaiLD/default/ChinaPublicServices_YaoHaiLD/{z}/{y}/{x}.png'
                // 高德地图 卫星影像
                'http://ak.dynamic.t0.tiles.virtualearth.net/comp/ch/{quadkey}?mkt=zh-CN&it=A,G,L&og=819&n=z',
                // 天地图
                // 'http://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=015e5d79012675b8fddf658aa86b4e9b'
                // 魏县
                // 'https://iserver.supermap.io/iserver/services/map-china400/rest/maps/China/zxyTileImage.png?z={z}&x={x}&y={y}'
                // 'http://100.16.128.62:8090/iserver/services/map-wxdp-2/wmts100?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=dlgdmdz&STYLE=default&TILEMATRIXSET=GoogleMapsCompatible_dlgdmdz&FORMAT=image/png&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}'
                // 徐州 gis 平面地图
                // 'http://172.17.216.27:6080/geoscene/rest/services/DZDTWebMercator/MapServer/WMTS?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=WXYXWebMercator&STYLE=default&TILEMATRIXSET=default028mm&FORMAT=image/jpgpng&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}',
                // 徐州 gis 卫星影像
                // 'http://172.17.216.27:6080/geoscene/rest/services/WXYXWebMercator/MapServer/WMTS?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=WXYXWebMercator&STYLE=default&TILEMATRIXSET=default028mm&FORMAT=image/jpgpng&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}',
                // 西咸路网
                // 'http://10.25.10.84:8090/iserver/services/map-XiXianLuWang/wmts100?Request=GetTile&Service=WMTS&Version=1.0.0&layer=路网&style=default&Format=image/png&tilematrixset=GoogleMapsCompatible_路网&TileMatrix={z}&TileCol={x}&TileRow={y}'

              ],
              tileSize: 206, // 文字大小
            },
          },
          layers: [
            {
              id: 'gd-satellite',
              type: 'raster',
              source: 'gd-satellite', // 对应sources里的属性
              layout: {
                visibility: 'visible', // 显示地图  隐藏地图none
              },
              minzoom: 0,
              maxzoom: 20,
            },
          ],
        },
        center: [114.022521, 34.721976], // 中线点
        pitch: 40, // 上下角度
        bearing: 0, // 左右角度
        zoom: 9,  // 视角远近
        projection: 'globe'  // 地图是不是圆的
      });
      this.map = map
      map.on('load', () => {
        map.addSource(loadId, {
          "type": "geojson",
          "data": geojson  // 初始展示的图标数据
        });
        map.addLayer({
          'id': 'background',
          'type': 'background',  // 背景图
          // 'source': loadId, // reference the data source
          // 'layout': {},
          'paint': {
            'background-color': 'blue', // 背景图颜色
            'background-opacity': 0.3  // 地图透明度
          }
        });
        map.addLayer({
          'id': loadId,
          'type': 'fill',  // 地图面
          'source': loadId, // reference the data source
          'layout': {},
          'paint': {
            'fill-color': '#ccc', // 地图面颜色
            'fill-opacity': 0.5  // 地图透明度
          }
        });
        map.addLayer({
          'id': 'fill-extrusion',
          'type': 'fill-extrusion',  // 3D地图面
          'source': loadId, // reference the data source
          'layout': {},
          'paint': {
            'fill-extrusion-height': 3150, // 地图高度
            'fill-extrusion-color': 'blue',
            'fill-extrusion-opacity': 0.5,
          }
        });
        map.addLayer({
          'id': 'outline',
          'type': 'line',  // 地图外边线
          'source': loadId,
          'layout': {},
          'paint': {
            'line-color': 'red',
            'line-width': 1
          }
        });


        map.loadImage(require('./img/coord-pedlar.png'), (error, image) => { // 地图点
          if (error) throw error;
          map.addImage('image', image);
          map.addSource('image', {
            "type": "geojson",
            "data": {  // 模拟的点位假数据
              'type': 'FeatureCollection',
              'features': [
                {
                  "id": 167932,
                  "type": "Feature",
                  "geometry": {
                    "type": "Point",
                    "coordinates": [114.022521, 34.721976],
                  },
                  'properties': {
                    'time': '2022-12-21',
                  },
                },]
            }
          });
          map.addLayer({
            'id': 'image',
            'type': 'symbol',
            'source': 'image',
            'layout': {
              'icon-image': 'image', // 这必须要
            }
          })
        })

        map.on('click', 'image', this.onMapClick) // 点击事件
        setTimeout(() => {
          //判断存在才移除
          //图层Id
          // if (map.getLayer(loadId)) {
          //   map.removeLayer(loadId);
          // }
          // //图片Id
          // if (map.hasImage(loadId)) {
          //   map.removeImage(loadId);
          // }

          // if (map.getSource(loadId)) {
          //   map.removeSource(loadId);
          // }

        }, 1000)
      })
    }
  }
}
</script>

<style>
#map-box {
  width: 100%;
  height: 100%;
}
</style>